<template>
  <el-container>
    <el-header class="pcub pcub-ac">
      <img style="width:180px;" src="@/assets/images/logo.png" alt>
      <div class="pcub-f1 pcub pcub-ac">
        <el-select v-if="user_Type_flag" v-model="value8" placeholder="请选择" class="ml20">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <div id="sc" style="overflow: hidden; width: 400px; align: center;color:red;margin-left:20px;">
                <table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tbody>
                        <tr>
                            <td id="marquePic1" valign="top">
                                <table width="600px">
                                    <tr>
                                        <td>欢迎您登录本系统，用户：{{user_Type_flag?'admin':'user'}}。</td>
                                        <td>欢迎您登录本系统，用户：{{user_Type_flag?'admin':'user'}}。</td>
                                    </tr>
                                </table>
                            </td>
                            <td id="marquePic2" valign="top">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
      </div>
      <reporthot :datas="datas"></reporthot>
      <router-link  to="/monite/1">
        <i
          class="sl-icon sl-jingbao mr20 pointer fz30"
          :style="{color:play_icon_color}"
        ></i>
        <audio
          src="/../static/video/02v888piCQBz.mp3"
          id="music"
          preload
          controls="controls"
          hidden
        ></audio>
      </router-link>
      <el-dropdown class="pcub pcub-ac pointer" @command="handleCommand">
        <span class="pcub pcub-ac">
          <em class="fz20 bold">{{user_Type_flag?'admin':'user'}}</em>
          <img style="width:40px;margin:0 10px;" src="@/assets/images/user.png" alt="">
        </span>
        <el-dropdown-menu slot="dropdown" style="width:200px;">
          <el-dropdown-item class="tx-c bb-e0e0e0 mb10" command="my">
            个人信息
          </el-dropdown-item>
          <el-dropdown-item class="tx-c" command="logout">
            退出
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-container>
      <el-aside width="201px">
        <el-menu :default-active="$route.path" theme="dark" router :unique-opened="true">
          <el-menu-item index="/home">
            <i class="sl-icon sl-yemian"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/engineeringManage">
            <i class="sl-icon sl-projectfeed"></i>
            <span slot="title">工程管理</span>
          </el-menu-item>
          <el-submenu index="/monite">
            <template slot="title">
              <i class="sl-icon sl-liuliang"></i>流量监测
            </template>
            <el-menu-item index="/monite/1">实时报表</el-menu-item>
            <!-- <el-menu-item index="/monite/2">历史图像</el-menu-item> -->
          </el-submenu>
          <el-submenu index="/history">
            <template slot="title">
              <i class="sl-icon sl-baobiaoguanli"></i>历史报表
            </template>
            <el-menu-item index="/history/1">历史数据</el-menu-item>
            <el-menu-item index="/history/2">历史曲线</el-menu-item>
          </el-submenu>
          <el-submenu index="/report">
              <template slot="title">
                <i class="sl-icon sl-icon-alarm"></i>报警管理
              </template>
              <el-menu-item index="/report/now">实时报警</el-menu-item>
              <el-menu-item index="/report/index">报警记录</el-menu-item>
          </el-submenu>
          <el-submenu index="/videoControl">
              <template slot="title">
                <i class="sl-icon sl-jiankong"></i>监控管理
              </template>
              <el-menu-item index="/videoControl/map">监控地图</el-menu-item>
              <el-menu-item index="/videoControl/list">监控视频</el-menu-item>
          </el-submenu>
          <el-submenu index="/auth">
            <template slot="title">
              <i class="sl-icon sl-quanxian"></i>权限管理
            </template>
            <el-menu-item index="/userManage">用户管理</el-menu-item>
            <el-menu-item index="/auth/api">角色权限</el-menu-item>
            <el-menu-item index="/auth/auth">权限管理</el-menu-item>
          </el-submenu>
            <el-submenu index="/system">
            <template slot="title">
              <i class="sl-icon sl-rizhi"></i>系统管理
            </template>
            <el-menu-item index="/system/log">系统日志</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="bgf7">
        <transition name="el-fade-in">
          <router-view :type="value8" :from_report_id="from_report_id"></router-view>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// curItemFn(function(s){
//   console.log(s)
// })
import reporthot from '@/components/reporthot.vue'
import tableData from '@/utils/table-data.js'
var play_timer = null,MyMar = null;
export default {
    components:{reporthot},
  name: "",
  data() {
    return {
      datas:'',
      user_Type_flag:false,
      options: [
        {
          value: "A",
          label: "工程A"
        },
        {
          value: "B",
          label: "工程B"
        },
        {
          value: "C",
          label: "工程C"
        }
      ],
      value8: "A",
      from_report_id:0,
      play_flag: false,
      play_icon_color: 'green',
    };
  },
  mounted() {
    //横向滚动 需要设置div的宽度
    var speed = 60
    marquePic2.innerHTML = marquePic1.innerHTML
    function Marquee() {
        if (sc.scrollLeft >= marquePic1.scrollWidth) {
            sc.scrollLeft = 0
        } else {
            sc.scrollLeft++
        }
    }
    MyMar = setInterval(Marquee, speed)
    sc.onmouseover = function () {
        clearInterval(MyMar)
    }
    sc.onmouseout = function () {
        MyMar = setInterval(Marquee, speed)
    }
  },
  created(){
    if(!sessionStorage.userType){
      this.$router.push('/login')
    }else if(sessionStorage.userType ==='管理员账户'){
      this.user_Type_flag = true;
    }
   
    setInterval(() => {
      let this_ =this
        curItemFn(function(s){
          this_.datas = JSON.stringify(s)
          if(s.status!='正常'){
            this_.palyPause()
          }
        })
      }, 6100);
  },
  methods: {
     handleCommand(command) {
       if(command==='my'){
         this.$router.push('/my')
       }else if(command==='logout'){
        this.logout()
       }
      },
    logout(){
      clearInterval(MyMar)
      sessionStorage.removeItem('userType');
      this.$router.push('/login')
    },
    palyPause() {
      var audio = document.getElementById("music");
      if (audio !== null) {
        console.log(this.play_flag)
         this.from_report_id = 1;
          audio.currentTime = 0;
          audio.play();
          this.play_icon_color = 'red';
          this.shan(true);
          this.play_flag = true;
          setTimeout(()=>{
            this.from_report_id = 0;
            audio.pause();
            this.play_flag = false
            this.shan(false)
          },6000)
        
        // if (this.play_flag) {
        //     this.from_report_id = 0;
        //     audio.pause();
        //     this.play_flag = false
        //     this.shan(false)
        // }else{
        //     this.from_report_id = 1;
        //     audio.currentTime = 0;
        //     audio.play();
        //     this.play_icon_color = 'red';
        //     this.shan(true);
        //     this.play_flag = true
        // }
      }
    },
    shan(boo){
        if(this.play_icon_color == 'yellow'){
            this.play_icon_color = 'red'
        }else if(this.play_icon_color == 'red'){
            this.play_icon_color = 'yellow'
        }
        if(boo){
            play_timer = setTimeout(()=>{
                this.shan(boo)
            },100)
        }else{
            this.play_icon_color = 'green'
            clearTimeout(play_timer)
        }
    }
  }
};
</script>

<style>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
  border-bottom: 1px solid #ebeef5;
}

.el-aside {
  color: #333;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
}
.el-menu {
  border-right-color: #fff;
}
</style>